<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="我的赛程" />
      <view class="tab-bar">
        <view class="tab-item" :class="{ active: tabIndex === 0 }" @click="handleTab(0)">赛事</view>
        <view class="tab-item" :class="{ active: tabIndex === 1 }" @click="handleTab(1)">活动</view>
        <view class="tab-underline" :style="{ left: tabIndex * 50 + '%' }"></view>
      </view>

      <!-- 赛事卡片列表 -->
      <view v-for="(item, idx) in list" :key="idx" class="event-card">
        <view class="card-img-wrap">
          <image :src="item.master_image" class="card-img" />
          <view class="card-status">
            <text class="status-icon">🏟️</text>
            <text class="status-text">{{ item.status_text }}</text>
          </view>
          <view v-if="item.btn" class="card-btn">{{ item.btn }}</view>
        </view>
        <view class="card-content">
          <view class="card-title">{{ item.name }}</view>
          <view class="card-info">
            <image :src="imgUrl + 'home.png'" class="home-icon iconStyle" />
            比赛日期：{{ formatTime(item.competition_time) }}
          </view>
          <view class="card-info">
            <image :src="imgUrl + 'home.png'" class="home-icon iconStyle" />
            报名日期：{{ formatTime(item.registr_time) }}
          </view>
          <view class="card-info">
            <image :src="imgUrl + 'home.png'" class="home-icon iconStyle" />
            地址：{{ item.address }}
          </view>
          <view class="card-footer">
            <view class="distance">
              <text class="iconfont">&#xe60d;</text>
              <text class="distance-text">{{ item.juli }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { useRequest } from '@/api'
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)

  const { API_MEMBER_MYEVENT_POST } = useRequest()
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const tabIndex = ref(0)
  const handleTab = (index) => {
    tabIndex.value = index
    getMyEvent()
  }
  const list = ref([
    {
      img: 'https://img1.imgtp.com/2023/09/13/4QwQv1Qe.jpg',
      name: '草源体育公开赛田径运动 · 郑州站',
      date: '2025.10.12',
      type: '田径',
      signupDate: '2025.12.12 12:00:00',
      address: '北京市朝阳区国际文化产业园2049',
      distance: '12.98km',
      btn: ''
    }
  ])

  const getMyEvent = async () => {
    const params = {
      type: tabIndex.value === 0 ? 'event' : 'act'
    }
    const res = await API_MEMBER_MYEVENT_POST(params)
    if (res.code === 1) {
      list.value = res.data.data || []
    }
  }
  getMyEvent()
  const formatTime = (timestamp) => {
    if (!timestamp) return '暂无时间'

    // 如果是字符串，转换为数字
    const time = typeof timestamp === 'string' ? parseInt(timestamp) : timestamp

    // 检查是否是有效的时间戳（10位或13位）
    if (time.toString().length === 10) {
      // 10位时间戳（秒）
      const date = new Date(time * 1000)
      return date
        .toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false
        })
        .replace(/\//g, '.')
    } else if (time.toString().length === 13) {
      // 13位时间戳（毫秒）
      const date = new Date(time)
      return date
        .toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false
        })
        .replace(/\//g, '.')
    } else {
      return '时间格式错误'
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
<style>
  .uv-form-item__body__left__content__required {
    color: red;
    /* 改变星号颜色 */
    margin-right: 10rpx !important;
    /* 添加右边距 */
    left: -12px !important;
  }
</style>
